<template>
  <div>
    <h2>图片管理</h2>
    <!--图片列表-->
    <el-table
      size="small"
      style="margin: 30px;"
      empty-text="无数据"
      :data="imgList"
      highlight-current-row v-loading="loading" border element-loading-text="拼命加载中">
      <el-table-column align="center" sortable prop="filePath" label="文件路径" width="450"></el-table-column>
      <el-table-column align="center" sortable prop="fileSize" label="文件大小" width="100"></el-table-column>
      <el-table-column align="center" sortable prop="fileName" label="文件名" width="130"></el-table-column>
      <el-table-column align="center" sortable prop="ext" label="扩展名" width="100"></el-table-column>
      <el-table-column align="center" sortable prop="fileType" label="文件类型" width="100"></el-table-column>
      <el-table-column align="center" sortable prop="filePath" label="预览图片" width="100">
        <template slot-scope="scope">
          <img :src="getImageUrl(scope.row.filePath)" style="max-width: 100px;max-height: 100px" alt="图标"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" icon="el-icon-download" @click="getFileSrc(scope.row)">下载</el-button>
          <el-popconfirm title="确定删除吗？" @confirm="handleDeleteOne(scope.row)">
            <template #reference>
              <el-button type="danger" size="small" icon="el-icon-delete">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination class="pagination" style="text-align: center;margin-top: 50px"
                   layout="prev, pager, next"
                   :current-page="page"
                   :total="total"
                   :page-size="limit"
                   @current-change="fetchData">
    </el-pagination>
  </div>
</template>

<script>
import fastApi from "@/api/fastdfs/fast";
import request from "../../utils/request";

export default {
  name: "FastdfsImg",
  data() {
    return {
      total: 0, // 数据库中的总记录数
      page: 1, // 默认页码
      limit: 5, // 每页记录数

      imgList: {},
      //imagePath: 'http://192.168.229.141/', // 图片的基础路径
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      fastApi.getPageFastImg(this.page, this.limit).then(response => {
        this.imgList = response.data.pageBean.lists
        this.total = response.data.pageBean.totalCount
      })
    },

    //获取图片路径
    getImageUrl(filePath) {
      //return `${this.imagePath}${filePath}`; // 拼接图片路径
      return this.$baseImagePath + '/' + filePath; // 拼接图片路径
    },

    //下一页
    fetchData(page) {
      this.page = page
      fastApi.getNextPageFastImg(this.page, this.limit).then(response => {
        this.imgList = response.data.pageBean.lists
        this.total = response.data.pageBean.totalCount
      })
    },

    // 单选删除
    handleDeleteOne(FastDfsFile) {
      fastApi.deleteFastImg(FastDfsFile.id, FastDfsFile.fileId).then(response => {
        this.$message.success(response.message)
        this.init()
      })
    },

    // 下载文件
    getFileSrc(FastDfsFile) {
      //window.open(this.$baseImagePath+'/'+FastDfsFile.fileId,"_blank");
      /*fastApi.downloadFastImg(FastDfsFile.fileId).then(response=>{
        this.$message.success(response.message)
      })*/
      window.location.href = request.defaults.baseURL + '/fastDFSFile?fileId=' + FastDfsFile.fileId + '&&fileName=' + FastDfsFile.fileName;
    }

  },
}
</script>

<style scoped>

</style>
